<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>文章列表</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" width="40" />
            <el-table-column prop="cate_1st_name" label="一级分类" width="120" />
            <el-table-column prop="cate_2nd_name" label="二级分类" width="120" />
            <el-table-column prop="main_photo" label="主图" width="120">
                <template #default="scope">
                    <el-image  :src="scope.row.main_photo" :fit="fill" />
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="180" />
            <el-table-column prop="label" label="标签" width="240">
                <template #default="scope">
                    <el-tag v-for="(item,index) in scope.row.tags" :key="index" style="margin-right:5px">{{ item.name}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="开始时间" width="84" />
            <el-table-column prop="update_time" label="更新时间" width="84" />
            <el-table-column prop="active" label="操作">
                <el-button type="primary" plain size="small">
                    <el-icon>
                        <Edit />
                    </el-icon>编辑
                </el-button>
                <el-button type="success" plain size="small">
                    <el-icon>
                        <Star />
                    </el-icon>标记
                </el-button>
                <el-button type="danger" plain size="small">
                    <el-icon>
                        <Delete />
                    </el-icon>删除
                </el-button>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup>
    import article from '@/api/article.js';
import { ref, reactive,onMounted } from 'vue';
let tableData = ref([

]);

onMounted(async()=> {
    let { status, data } = await article.list();
    if (status) {
        tableData.value = data;
        console.log(data)
    }
})
</script>


